import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { authAPI } from '../services/api';

const Register: React.FC = () => {
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
    confirmPassword: ''
  });
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const { login } = useAuth();
  const navigate = useNavigate();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');

    // 验证密码
    if (formData.password !== formData.confirmPassword) {
      setError('两次输入的密码不一致');
      setIsLoading(false);
      return;
    }

    try {
      const response = await authAPI.register({
        username: formData.username,
        email: formData.email,
        password: formData.password
      });
      
      login(response.token, response.user);
      navigate('/');
    } catch (error: any) {
      setError(error.message || '注册失败，请重试');
    } finally {
      setIsLoading(false);
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div className="min-h-screen bg-black flex flex-col">
      {/* 顶部导航 */}
      <div className="flex items-center justify-between p-4">
        <button 
          onClick={() => navigate('/')}
          className="text-white text-lg"
        >
          ✕
        </button>
        <h1 className="text-white text-lg font-bold">注册</h1>
        <div className="w-6"></div>
      </div>

      <div className="flex-1 flex flex-col justify-center px-6">
        {/* Logo */}
        <div className="text-center mb-12">
          <div className="w-20 h-20 bg-gradient-to-r from-red-500 to-pink-500 rounded-full mx-auto mb-4 flex items-center justify-center">
            <svg className="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
            </svg>
          </div>
          <h2 className="text-white text-2xl font-bold mb-2">创建账号</h2>
          <p className="text-gray-400">加入快手，分享精彩生活</p>
        </div>

        {/* 注册表单 */}
        <form onSubmit={handleSubmit} className="space-y-6">
          {error && (
            <div className="bg-red-900 text-red-200 px-4 py-3 rounded-lg">
              {error}
            </div>
          )}

          <div>
            <label htmlFor="username" className="block text-white text-sm font-medium mb-2">
              用户名
            </label>
            <input
              id="username"
              name="username"
              type="text"
              value={formData.username}
              onChange={handleInputChange}
              className="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500"
              placeholder="请输入用户名"
              minLength={2}
              maxLength={20}
              required
            />
          </div>

          <div>
            <label htmlFor="email" className="block text-white text-sm font-medium mb-2">
              手机号/邮箱
            </label>
            <input
              id="email"
              name="email"
              type="email"
              value={formData.email}
              onChange={handleInputChange}
              className="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500"
              placeholder="请输入手机号或邮箱"
              required
            />
          </div>

          <div>
            <label htmlFor="password" className="block text-white text-sm font-medium mb-2">
              密码
            </label>
            <input
              id="password"
              name="password"
              type="password"
              value={formData.password}
              onChange={handleInputChange}
              className="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500"
              placeholder="请输入密码（至少6位）"
              minLength={6}
              required
            />
          </div>

          <div>
            <label htmlFor="confirmPassword" className="block text-white text-sm font-medium mb-2">
              确认密码
            </label>
            <input
              id="confirmPassword"
              name="confirmPassword"
              type="password"
              value={formData.confirmPassword}
              onChange={handleInputChange}
              className="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500"
              placeholder="请再次输入密码"
              minLength={6}
              required
            />
          </div>

          <div className="flex items-start space-x-2">
            <input 
              type="checkbox" 
              id="agree" 
              className="mt-1"
              required
            />
            <label htmlFor="agree" className="text-gray-400 text-sm">
              我已阅读并同意
              <Link to="/terms" className="text-red-500 hover:text-red-400">用户协议</Link>
              和
              <Link to="/privacy" className="text-red-500 hover:text-red-400">隐私政策</Link>
            </label>
          </div>

          <button
            type="submit"
            disabled={isLoading}
            className="w-full bg-gradient-to-r from-red-500 to-pink-500 text-white py-3 rounded-lg font-medium hover:from-red-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-black disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isLoading ? '注册中...' : '立即注册'}
          </button>
        </form>

        {/* 其他注册方式 */}
        <div className="mt-8">
          <div className="relative">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-gray-700"></div>
            </div>
            <div className="relative flex justify-center text-sm">
              <span className="px-2 bg-black text-gray-400">其他注册方式</span>
            </div>
          </div>

          <div className="mt-6 grid grid-cols-3 gap-4">
            <button className="flex flex-col items-center p-4 bg-gray-900 rounded-lg hover:bg-gray-800">
              <div className="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mb-2">
                <span className="text-white text-sm">微</span>
              </div>
              <span className="text-gray-400 text-xs">微信</span>
            </button>
            <button className="flex flex-col items-center p-4 bg-gray-900 rounded-lg hover:bg-gray-800">
              <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mb-2">
                <span className="text-white text-sm">Q</span>
              </div>
              <span className="text-gray-400 text-xs">QQ</span>
            </button>
            <button className="flex flex-col items-center p-4 bg-gray-900 rounded-lg hover:bg-gray-800">
              <div className="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center mb-2">
                <span className="text-white text-sm">微</span>
              </div>
              <span className="text-gray-400 text-xs">微博</span>
            </button>
          </div>
        </div>

        {/* 登录链接 */}
        <div className="mt-8 text-center">
          <p className="text-gray-400">
            已有账号？
            <Link to="/login" className="text-red-500 hover:text-red-400 font-medium">
              立即登录
            </Link>
          </p>
        </div>
      </div>

      {/* 底部协议 */}
      <div className="p-6 text-center">
        <p className="text-gray-500 text-xs">
          注册即表示同意
          <Link to="/terms" className="text-red-500 hover:text-red-400">用户协议</Link>
          和
          <Link to="/privacy" className="text-red-500 hover:text-red-400">隐私政策</Link>
        </p>
      </div>
    </div>
  );
};

export default Register; 